<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特征布局-翻页</title>
	<style type="text/css">
		.pagenation{
			width: 958px;
			height: 40px;
			border: 1px solid #333;
			margin: 50px auto 0;
			list-style: none;
			text-align: center;
			font-size: 0;
		}
		
		.pagenation li{
			float: left;
			display: inline;
		}

		.pagenation a{
			text-decoration: none;
			margin: 8px 5px;
			padding: 5px 10px;
			font-size: 12px;
			font-family: 'Microsoft Yahei'
			color: #000;
			background-color: gold;
			display: inline-block;
		}

		.pagenation a:hover{
			color: #fff;
			background-color: red;
		}

		.pagenation span{
			color: #333;
			display: inline-block;
			font-size: 12px;	
		}
	</style>
</head>
<body>
	<ul class="pagenation">
		<li style="margin-left:200px"</style>><a href="">上一页</a></li>
		<li><a href="">1</a></li>
		<li><a href="">2</a></li>
		<li><a href="">3</a></li>
		<li><a href="">4</a></li>
		<li><span>...</span></li>
		<li><a href="">17</a></li>
		<li><a href="">18</a></li>
		<li><a href="">19</a></li>
		<li><a href="">20</a></li>
		<li><a href="">下一页</a></li>
	</ul>
</body>
</html>